//todolist遍历到的每一项的组件
<template>
  <div>
    <!-- 复选框checkbox -->
    <!-- 绑定子组件传递过来的事件和数据 -->
    <todo-check :item="item" @todoCheck="todoCheck"></todo-check>
    <!-- 每项内容 -->
    <todo-content :item="item"></todo-content>
    <!-- 删除该项的按钮 -->
    <todo-remove :item="item" @removeTodo="removeTodo"></todo-remove>
  </div>
</template>

<script>
import TodoCheck from "./TodoCheck.vue";
import TodoContent from "./TodoContent.vue";
import TodoRemove from "./TodoRemove.vue";

export default {
  name: "TodoItem",
  props: ["item"],
  components: {
    TodoCheck,
    TodoContent,
    TodoRemove,
  },
  mounted() {
    // console.log(this.item);
  },
  methods: {
    todoCheck(id) {
      // 再次往上级传递事件
      this.$emit("toggleCompleted", id);
    },
    removeTodo(id) {
      this.$emit("removeTodo", id);
    },
  },
};
</script>